<template>
  <view class="container">
    <!-- 展览列表 -->
	<view class="bg-white mb-12">
		<uni-search-bar @confirm="search" :focus="true" v-model="dataJson.search"
						@cancel="cancel" @clear="clear" cancelButton="none">
					</uni-search-bar>
	</view>
	<scroll-view scroll-y @scrolltolower="ReachBottom" class="scorll-blcok">
	<view class="px-16">
		<view v-for="(item, index) in exhibitionList" :key="index" class="exhibition-card" @click="toDetail(item)">
		  <!-- 图片区域（需要替换实际图片路径） -->
		  <view class="flex radius-8">
			  <view class="">
				<image :src="$utils.getPic(item.imgs)" style="width: 180rpx; height: 200rpx;" mode="aspectFill" class="radius-4">
				</image>
			  </view>
			  <view class="flex-1">
				  <view class="content-wrapper ">
				    <view class="header" >
				      <text class="title line-text-space">{{ item.title }}</text>
				    </view>
				    <text class="description">{{ item.content }}</text>
					<text class="date flex-x-end">{{ item.createtime }}</text>
				  </view>
			  </view>
		  </view>
		</view>
	</view>
	<uni-load-more
	  :status="loding.status"
	  :contentText="loding.contentText"
	  v-if="exhibitionList.length > 0"
	></uni-load-more>
	<view v-else class="cl-main flex-center noData-blcok"> 暂无数据</view>
	</scroll-view>
  
  </view>
</template>

<script>
export default {
  data() {
    return {
	  searchValue:'',
      exhibitionList: [],
	  dataJson: {
	  	endtime: "",
	  	limit: 5,
	  	page: 1,
	  	search: "",
	  	starttime: "",
	  	type: 0,//文物
	  },
	  // 分页
	  loding: {
	    //加载更多配置
	    total: 0,
	    reload: false,
	    status: 'more',
	    contentText: {
	      contentdown: '上拉加载更多~',
	      contentrefresh: '正在加载更多~',
	      contentnomore: '已经到底了~'
	    }
	  },
    };
  },
  onLoad(option) {
	if(option.type == 3){
	  uni.setNavigationBarTitle({
	      title:  "活动预约"
	  })
	}else{
		uni.setNavigationBarTitle({
		    title:  "参观预约"
		})
	}
  	this.dataJson.type = option.type
	this.init()
  },
  methods: {
	  //清除数据
	  init() {
	    this.dataJson.page = 1
	    this.exhibitionList = []
	    this.getList()
	  },
	  ReachBottom() {
	    if (this.loding.total > this.exhibitionList.length) {
	      this.loding.status = 'loading'
	      setTimeout(() => {
	        this.dataJson.page++
	        this.getList() //执行的方法
	      }, 1000)
	    } else {
	      //停止加载
	      this.loding.status = 'noMore'
	    }
	  },
	  getList() {
	  	this.$rqt.getReservationPageList(this.dataJson).then((res) => {
	  		if (res.code == 200) {
				let data = res.data.records
				this.loding.total = res.data.total
				if (this.loding.total > 0) {
				  this.exhibitionList = this.reload ? data : this.exhibitionList.concat(data)
				  this.reload = false
				} else {
				  this.exhibitionList = []
				}
				if (this.loding.total == this.exhibitionList.length) {
				  this.reload = false
				  this.loding.status = 'noMore'
				}
				uni.stopPullDownRefresh() //结束下拉刷新
	  			uni.hideLoading()
	  		}
	  		uni.hideLoading()
	  	})
	  },
    formatDate(dateString) {
      // 简单日期格式化示例
      return dateString.replace(/-/g, ".");
    },
	search(res) {
		this.init();
	},

	clear(res) {
	},

	toDetail(item){
		uni.navigateTo({
			url:'/pages/indexOther/showOrdetip?id='+item.id
		})
	},
  }
};
</script>

<style scoped>
.container {

  /* background-color: #f5f5f5; */
}
image {
	vertical-align: bottom;
	}
.exhibition-card {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.exhibition-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx 12rpx 0 0;
}

.content-wrapper {
  padding: 24rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
}

.date {
  font-size: 24rpx;
  color: #999;
}

.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.scorll-blcok{
	height: calc(100vh - 230rpx);
}
</style>